<template>
  <el-card
    shadow="never"
    class="box-card"
    :body-style="{
      display: 'flex',
      'justify-content': ' space-between',
      'align-items': 'center',
    }"
  >
    <div class="leftContainer">
      <div class="title">{{ topic.title }}</div>
      <div class="categorys">
        <el-tag
          v-for="type in topic.category"
          :key="type"
          type="info"
          size="small"
          >{{ type }}</el-tag
        >
      </div>
    </div>

    <div class="controls">
      <!-- <el-button @click="alterTopic" type="primary">修改</el-button> -->
      &nbsp;
      <el-popconfirm @confirm="delTopic" title="确定删除吗？">
        <!-- <el-button type="danger" slot="reference">删除</el-button> -->
        <!-- <el-button>删除</el-button> -->
      </el-popconfirm>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "TopicManagerBlock",
  props: ["topic", "switchDialog", "dropTopicById"],
  methods: {
    alterTopic() {
      this.$store.commit("topicAbout/SET_CURRENTTYPE", this.topic.type);
      this.$store.commit("topicAbout/INIT_TOPIC", this.topic);
      this.switchDialog();
    },
    // 删除题目的方法
    delTopic() {
      // console.log("一个网络请求即可");
      const { tid } = this.topic;
      this.axios
        .post(`${this.$reqPrefix}/deleteExcercise`, { tid })
        .then((res) => {
          console.log("ok");
          if (res.data.code == 200) {
            alert("删除成功");
            // 触发父元素的更新方法
            dropTopicById(tid);
          } else {
            res.data.message && alert(res.data.message);
          }
        });
    },
  },
};
</script>

<style lang='less' scoped>
.el-card {
  // width: fit-content;
  margin-bottom: 10px;
  // display: inline-block;
  .leftContainer {
    display: flex;
    .title {
      font-weight: bold;
      font-size: 1.2em;
    }
    .categorys {
      margin-left: 20px;
      .el-tag {
        margin-right: 5px;
      }
    }
  }
}
</style>